Coding JavaScript for Mobile Browsers (part 1) - Standard dialogs

2. JavaScript Mobile Compatibility

As you move into JavaScript on the mobile web, you’ll want to test compatibility and use some old-fashioned features.

2.1. Feature detection

The simplest way to detect if a feature, API, function, or object is available to use is to ask if it exists using a simple if statement:

if (object) {
    // Object available
}

For example:

if (document.getElementById) {
    // DOM function available
}

Warning:

Even on JavaScript-compatible devices, a script might not work because of the user’s (or company’s) profile. For example, BlackBerry devices have the option to disallow JavaScript from the browser or from the company policies. You should always present a non-JavaScript version of your site’s functionality.

2.2. Standard dialogs

JavaScript supports a list of standard dialogs that are undervalued in modern desktop websites, often being replaced by Dynamic HTML or UI libraries. They make great standard dialogs for use in mobile websites, though, as shown in Figure 1.

The list of available dialogs is:

• alert, for showing a message

• confirm, for receiving a Boolean response from the user

• prompt, for receiving a string from the user

• print, for sending the web page to the printer

• find, for invoking the find feature of the browser

The find dialog isn’t really part of the standard, but it works in almost every non-IE desktop web browser on the market. This dialog receives three optional parameters: the text to find, a case-sensitive Boolean, and a backwards Boolean. In general, it should be avoided in mobile browsers. Most of them don’t have a search feature.

The print dialog isn’t mobile compatible, for obvious reasons, but the alert, confirm, and prompt dialogs are compatible with almost every JavaScript-enabled mobile phone (as Table 3 shows). I encourage you to use them when needed. Using a standard dialog will always be quicker, simpler, nicer, and more compatible than using any other solution for the same task.

Common problems with the alert dialog (and the others) are the usage of the carriage return for multiline text, and how to display text that’s too big to fit in the available space. For the first problem, it is common in desktop JavaScript to use the \n (newline) escape special character. (There are other special escape characters, too, like \t for tabulation.) Let’s see what happens with both problems in mobile browsers. Table 8-4 reports on their support for newlines and large amounts of text in dialogs, and Figure 2 shows the use of a scrolling area that supports long text.

Note:

For usability reasons, if a device has a numeric keyboard it is best to use a normal text input with numeric capabilities, rather than a selection list. Remember that a numeric keyboard is useful for numeric entries.